<template>
  <div class="fillcontain">
    <head-top></head-top>
    <!-- 搜索部分 -->
    <div class="table_container search_container">
      <el-input class="el-input-wrapper" v-model="authorQuestionListParams.searchKey" placeholder="请输入搜索关键字" />
      <el-select class="el-input-wrapper" v-model="authorQuestionListParams.orderByType" placeholder="请选择">
        <el-option v-for="item in authorQuestionListParamsOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
        </el-option>
      </el-select>
      <label for="答题人数最大值" class="info el-input-wrapper">
        答题人数最大值:
        <el-input-number v-model="authorQuestionListParams.answerNumMax" :min="1" label="答题人数最大值"></el-input-number>
      </label>
      <label for="答题人数最大值" class="info el-input-wrapper">
        答题人数最小值:
        <el-input-number v-model="authorQuestionListParams.answerNumMin" :min="0" label="答题人数最大值"></el-input-number>
      </label>
      <el-button class="el-input-wrapper" type="primary" @click="_getAuthorQuestionList">搜索</el-button>
    </div>
    <!-- 下载内容 -->
    <div class="table_container download_container" v-if="adminInfo.identityType !== 3">
      <el-input class="el-input-wrapper" v-model="exportSearchKey" placeholder="请输入导出关键字" />
      <div class="el-input-wrapper">
        选择数据：
        <el-select v-model="exportOrderByTypeValue">
          <el-option v-for="(item, index) in exportOrderByType"
                    :key="index"
                    :value="item.value"
                    :label="item.label"></el-option>
        </el-select>
      </div>
      <div class="el-input-wrapper">
        导出类型：
        <el-select v-model="exportExportTypeValue">
          <el-option v-for="(item, index) in exportExportType"
                    :key="index"
                    :value="item.value"
                    :label="item.label"></el-option>
        </el-select>
      </div>
      <el-select class="el-input-wrapper" v-model="exportQueryUserTypeValue">
        <el-option v-for="(item, index) in exportQueryUserType"
                  :key="index"
                  :value="item.value"
                  :label="item.label"></el-option>
      </el-select>
      <label for="答题人数最大值" class="info el-input-wrapper">
        答题人数最大值:
        <el-input-number v-model="exportAnswerNumMax" :min="1" label="答题人数最大值"></el-input-number>
      </label>
      <label for="答题人数最大值" class="info el-input-wrapper">
        答题人数最小值:
        <el-input-number v-model="exportAnswerNumMin" :min="0" label="答题人数最小值"></el-input-number>
      </label>
      <el-button class="el-input-wrapper" type="primary" @click="downLoadFile">导出</el-button>
      <!-- <a id="downLoad" download ref="downLoad">下载</a> -->
    </div>
    <div class="table_container">
      <el-table :data="tableData"
        :expand-row-keys='expendRow'
        :row-key="row => row.index"
        stripe
        style="width: 100%">
        <el-table-column label="序号"
          align="center"
          type="index"
          width="80"
        fixed>
        </el-table-column>
        <el-table-column
          label="出题人昵称"
          prop="username"
          align="center"
          width="200px"
        >
        </el-table-column>
        <el-table-column
          label="出题人头像"
          align="center"
        >
          <template slot-scope="scope">
            <img style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden;" :src="scope.row.avatar">
          </template>
        </el-table-column>
         <el-table-column
          label="出题人手机号"
          prop="mobile"
          align="center"
          width="130px"
        >
        </el-table-column>
        <el-table-column
          label="题目ID"
          prop="userAnswerSettingId"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="首次出题时间"
          prop="dateline"
          align="center"
          width="180px"
        >
        </el-table-column>
        <!-- <el-table-column
          label="最近修改时间"
          prop=""
          align="center"
          width="180px"
        >
        </el-table-column> -->
        <el-table-column
          label="答题人数"
          prop="answerNum"
          align="center"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          label="题目详情"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              round
              type="info"
              @click="handleShowDetail(scope.row.userAnswerSettingId)">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="答题列表"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              round
              type="success"
              @click="handleShowList(scope.row.userAnswerSettingId)">查看列表</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="Pagination">
        <el-pagination
          @current-change="_getAuthorQuestionList"
          :current-page.sync="authorQuestionListParams.p"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="totalSize"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { Loading } from 'element-ui';
import headTop from "../components/headTop";
import {
  getFoods,
  getFoodsCount,
  getMenu,
  updateFood,
  deleteFood,
  getResturantDetail,
  getMenuById,
  authorQuestionList,
  downLoadFile
} from "@/api/getData";
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      tableData: [],
      selectTable: {},
      expendRow: [],
      //
      authorQuestionListParams: {
        searchKey: "", // 搜索关键词
        orderByType: 1, // 排序:1:id降序,2:ID升序,3:创建时间降序,4:创建时间升序,5:答题人数降序,6:答题人数升序
        answerNumMax: 10, // 答题人数最大值
        answerNumMin: 0, // 答题人数最小值
        p: 1, // 页码
        size: 10 // 条数
      },
      authorQuestionListParamsOptions: [
        {
          value: 1,
          label: "id降序"
        },
        {
          value: 2,
          label: "id升序"
        },
        {
          value: 3,
          label: "创建时间降序"
        },
        {
          value: 4,
          label: "创建时间升序"
        },
        {
          value: 5,
          label: "答题人数降序"
        },
        {
          value: 6,
          label: "答题人数升序"
        }
      ],
      totalPage: 1,
      totalSize: 0,
      //  导出
      exportOrderByType: [
        { value: 1, label: "当前页" },
        { value: 2, label: "所有结果" }
      ],
      exportOrderByTypeValue: 1,
      exportExportType: [
        { value: 1, label: "当前页" },
        { value: 2, label: "所有结果" }
      ],
      exportExportTypeValue: 1,
      exportQueryUserType: [
        { value: 1, label: "出题人" },
        { value: 2, label: "答题人" }
      ],
      exportQueryUserTypeValue: 1,
      exportSearchKey: "",
      exportAnswerNumMax: 10,
      exportAnswerNumMin: 0
    };
  },
  created() {
    this._getAuthorQuestionList();
  },
  computed: {
    ...mapGetters([
      'adminInfo'
    ]),
    specs: function() {
      let specs = [];
      if (this.selectTable.specfoods) {
        this.selectTable.specfoods.forEach(item => {
          specs.push({
            specs: item.specs_name,
            packing_fee: item.packing_fee,
            price: item.price
          });
        });
      }
      return specs;
    }
  },
  components: {
    "head-top": headTop
  },
  methods: {
    handleShowDetail(userAnswerSettingId) {
      this.$router.push({
        path: "/questionDetail",
        query: {
          userAnswerSettingId
        }
      });
    },
    handleShowList(userAnswerSettingId) {
      this.$router.push({
        path: "/visitor",
        query: {
          userAnswerSettingId
        }
      });
    },
    async _getAuthorQuestionList() {
      try {
        const { code, data, msg } = await authorQuestionList(
          this.authorQuestionListParams
        );

        if (code !== 0) {
          return this.$message({
            type: "error",
            message: msg || "接口错误"
          });
        }

        this.tableData = data.data;
        this.totalPage = data.p;
        this.totalSize = data.size;
      } catch (err) {}
    },
    async downLoadFile() {
      // 导出文件
      const param = {
        orderByType: this.exportOrderByTypeValue,
        exportType: this.exportExportTypeValue,
        queryUserType: this.exportQueryUserTypeValue,
        searchKey: this.exportSearchKey,
        answerNumMax: this.exportAnswerNumMax,
        answerNumMin: this.exportAnswerNumMin,
        p: this.authorQuestionListParams.p,
        size: 100
      }
      let loadingInstance = Loading.service()
      try {
        let { data, code, msg } = await downLoadFile(param);

        if (code !== 0) {
          return this.$message({
            type: "error",
            message: msg || "接口错误"
          });
        }

        const eleLink = document.createElement('a')
        eleLink.style.display = 'none'
        eleLink.setAttribute('download', true)
        eleLink.setAttribute('href', data.downloadUrl)
        document.body.appendChild(eleLink)
        eleLink.click()
        document.body.removeChild(eleLink)
        loadingInstance.close()
      } catch (err) {
        loadingInstance.close()
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../style/mixin";
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.table_container {
  padding: 20px;
  .el-input-wrapper {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 5px;
  }
}
.Pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-input {
  width: 180px;
}
.search_container {
  margin-bottom: 20px;
}
#downLoad {
  display: none;
}
</style>
